<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>FIRST</title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			.container{
				width: 100vw;
				height: 100vh;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		canvas{
			width: 400px;
			height: 400px;
			border: 10px solid #333333;
		}	
		
		</style>
	</head>
	<body>
		<div class="container">
		<canvas id="canvas" width="500" height="500"></canvas>
		</div>
	</body>
	<script>
		window.onload = function() {
			
			let oCanvas = document.getElementById('canvas');
		
			console.dir(oCanvas);
			
			let oPen=oCanvas.getContext("2d");
			
			//strokeText()
			let str ="HELLO WORLD!傅哥真帅！！";
			
			oPen.font="italic 900 40px 宋体";
			/**
			 * font
			 * font-style  font-weight font-size font-family
			 * normol ->默认italic ->斜体oblique ->倾斜字体
			 */
			oPen.strokeStyle="aquamarine"
			
			oPen.strokeText(str,10,40,300);
			/**
			 * text(str);显示的文字
			 * x（10）；坐标
			 * y（10）；坐标
			 * maxtext（20）；最大宽度;超出最大宽度，文字显示是完整的，但是被压缩了
			 */
			
			oPen.fillText(str,10,40,300)
			oPen.fillStyle="darkorchid"
//			
//			console.dir(oPen.measureText(str))
//			
//			alert(oPen.measureText(str).width);
//			
//			"center right left"
			
//			textspace(oPen,"文字居中","center")
//			function textspace(oPen,str,type){
//				oPen.strokeStyle = "aque";
//				oPen.font ="italic 900 40px 宋体"
////					oPen.fillStyle="yellow";
////				oPen.fillText(str,10,40,300);
//				let textWidth =oPen.measureText(str).width;
//				let x=0;
//				if(type === "center"){
//					//居中
//					 x=(500-textWidth) / 2.0;
//					oPen.strokeText(str,x,40);
//				}
//				else if(type === "left"){
//					 x=0;
//					oPen.strokeText(str,x,40);
//				}
//				else if(type === "right"){
//					 x=500-textWidth;
//					oPen.strokeText(str,x-10,40);
//				}
//			}
//          oPen.strokeStyle = "aque";
//			oPen.font ="italic 900 40px 宋体"
//			oPen.textAlign="center"
//			oPen.stroke();
			
		}
	</script>
</html>
